import { Toast, NavBar, Tabs, Dialog } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import styles from './orders.module.css'
import imgs from '../assets/img17517918accc71228.png'
import React, { useState, useEffect } from 'react'
import { order, orderpay, ordercancel, orderrefund } from '../api/ordes'
export default function Order() {
  let navige = useNavigate()
  // 用户id
  let dysID = sessionStorage.getItem('dys')
  console.log(dysID);
  //  全部订单列表
  const [alllist, setAll] = useState(null)
  // 判断未付款的状态是否显示
  const [status, setStatus] = useState(null)

  // 订单列表
  useEffect(() => {
    render()
    function render() {
      order({
        uid: dysID
      }).then(res => {
        console.log(res);
        setAll(res.data)
        setStatus(res.data.list)
        console.log(status, '状态');
      })
    }
  }, [])
  console.log(alllist);

  if (alllist) {
    return (
        <div className={styles.box}>
          <NavBar
            title='我的订单'
            onClickLeft={() => (navige(-1))}
          />
          <div className={styles.demotabs}>
            <Tabs color='rgba(224, 175, 117, 1)'>
              <Tabs.TabPane title='全部订单'>
                {alllist.all.map((item) => (
                  <div>
                    {item.list.map((items) => (
                      <div className={styles.demo_all}>
                        <div style={{ 'textIndent': '10px', 'marginTop': '10px', 'borderBottom': '2px solid #F2F2F2', 'height': '30px' }}>订单编号:&nbsp;42442221224</div>
                        <div className={styles.order_box}>
                          <div className={styles.order_title}>
                            <img style={{ 'width': '50px','height': '50px' }} src={items.imgs} alt="" />
                          </div>
                          <div className={styles.order_title}>
                            {items.name}
                          </div>
                          <div className={styles.order_title}>
                            {items.status == 1 ? '未付款' : items.status == 2 ? '已付款' : items.status == 3 ? '已发货' : items.status == 4 ? '已收货' :
                              items.status == 5 ? '已评价' : items.status == 6 ? '退款中' : items.status == 7 ? '已退款' : items.status == 8 ? '已取消' : items.status
                            }
                          </div>
                        </div>
                        <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between', 'height': '40px' }}>
                          <div style={{ 'textIndent': '17px' }}>应付:￥{items.price}</div>
                          <div className={styles.cancel}>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
    
                ))}
    
              </Tabs.TabPane>
              <Tabs.TabPane title='待付款'>
                {alllist.info1.map((item) => (
                  <div>
                    {item.list.map((items) => (
                      <div className={styles.demo_all}>
                        <div style={{ 'textIndent': '10px', 'marginTop': '10px', 'borderBottom': '2px solid #F2F2F2', 'height': '30px' }}>订单编号:&nbsp;42442221224</div>
                        <div className={styles.order_box}>
                          {/* {item?.list.map((itens)=>())} */}
                          <div className={styles.order_title}>
                            <img style={{ 'width': '50px', 'height': '50px' }} src={items.imgs} alt="" />
                          </div>
                          <div className={styles.order_title}>
                            {items.name}
                          </div>
                          <div className={styles.order_title}>
                            {items.status == 1 ? '未付款' : items.status == 2 ? '已付款' : items.status == 3 ? '已发货' : items.status == 4 ? '已收货' :
                              items.status == 5 ? '已评价' : items.status == 6 ? '退款中' : items.status == 7 ? '已退款' : items.status == 8 ? '已取消' : items.status
                            }
                          </div>
                        </div>
                        <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between', 'height': '40px' }}>
                          <div style={{ 'textIndent': '17px' }}>应付:￥{items.price}</div>
                          <div className={styles.cancel}>
                            <p
                              onClick={async () => {
                                try {
                                  await Dialog.confirm({
                                    title: '确认取消订单？',
                                    message: '确认要取消当前商品吗？',
                                  })
                                  console.log('confirm')
                                  ordercancel({ id: items.id }).then(res => {
                                    Toast({
                                      message: '取消成功',
                                      position: 'top',
                                    })
                                    console.log(res);
                                  })
                                } catch (error) {
                                  console.log('cancel')
                                }
                              }}
                            >取消订单</p>
                            <div
                              onClick={() => {
                                orderpay({ id: items.id }).then(res => {
                                  Toast({
                                    message: '付款成功',
                                    position: 'top',
                                  })
                                  console.log(res);
                                })
                              }}
                            >付款</div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </Tabs.TabPane>
              <Tabs.TabPane title='待收货'>
                {alllist?.info3.map((item) => (
                  <div>
                    {item?.list.map((items) => (
                      <div className={styles.demo_all}>
                        <div style={{ 'textIndent': '10px', 'marginTop': '10px', 'borderBottom': '2px solid #F2F2F2', 'height': '30px' }}>订单编号:&nbsp;42442221224</div>
                        <div className={styles.order_box}>
                          {/* {item?.list.map((itens)=>())} */}
                          <div className={styles.order_title}>
                            <img style={{ 'width': '50px', 'height': '50px' }} src={items.imgs} alt="" />
                          </div>
                          <div className={styles.order_title}>
                            {items.name}
                          </div>
                          <div className={styles.order_title}>
                            {items.status == 1 ? '未付款' : items.status == 2 ? '已付款' : items.status == 3 ? '已发货' : items.status == 4 ? '已收货' :
                              items.status == 5 ? '已评价' : items.status == 6 ? '退款中' : items.status == 7 ? '已退款' : items.status == 8 ? '已取消' : items.status
                            }
                          </div>
                        </div>
                        <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between', 'height': '40px' }}>
                          <div style={{ 'textIndent': '17px' }}>应付:￥{items.price}</div>
                          <div className={styles.cancel}>
                            <p
                              onClick={async () => {
                                try {
                                  await Dialog.confirm({
                                    title: '确认取消订单？',
                                    message: '确认要取消当前商品吗？',
                                  })
                                  console.log('confirm')
                                  ordercancel({ id: items.id }).then(res => {
                                    Toast({
                                      message: '取消成功',
                                      position: 'top',
                                    })
                                    console.log(res);
                                  })
                                } catch (error) {
                                  console.log('cancel')
                                }
                              }}
                            >取消订单</p>
                            <div
                              onClick={async () => {
                                try {
                                  await Dialog.confirm({
                                    title: '确认退款？',
                                    message: '确认要退款当前商品吗？',
                                  })
                                  console.log('confirm')
                                  orderrefund({ id: items.id }).then(res => {
                                    Toast({
                                      message: '申请退款成功,待审核',
                                      position: 'top',
                                    })
                                    console.log(res);
                                  })
                                } catch (error) {
                                  console.log('cancel')
                                }
                              }}
                            >退款</div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </Tabs.TabPane>
              <Tabs.TabPane title='已完成'>
                {alllist?.info4.map((item) => (
                  <div>
                    {item?.list.map((items) => (
    
                      <div className={styles.demo_all}>
                        <div style={{ 'textIndent': '10px', 'marginTop': '10px', 'borderBottom': '2px solid #F2F2F2', 'height': '30px' }}>订单编号:&nbsp;42442221224</div>
                        <div className={styles.order_box}>
                          {/* {item?.list.map((itens)=>())} */}
                          <div className={styles.order_title}>
                            <img style={{ 'width': '50px', 'height': '50px' }} src={items.imgs} alt="" />
                          </div>
                          <div className={styles.order_title}>
                            {items.name}
                          </div>
                          <div className={styles.order_title}>
                            {items.status == 1 ? '未付款' : items.status == 2 ? '已付款' : items.status == 3 ? '已发货' : items.status == 4 ? '已收货' :
                              items.status == 5 ? '已评价' : items.status == 6 ? '退款中' : items.status == 7 ? '已退款' : items.status == 8 ? '已取消' : items.status
                            }
                          </div>
                        </div>
                        <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between', 'height': '40px' }}>
                          <div style={{ 'textIndent': '17px' }}>应付:￥{items.price}</div>
                          <div className={styles.cancel}>
                            {/* <p>取消订单</p>
                            <div>付款</div> */}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
    
                ))}
              </Tabs.TabPane>
              <Tabs.TabPane title='已取消'>
                {alllist?.info8.map((item) => (
                  <div>
                    {item?.list.map((items) => (
    
                      <div className={styles.demo_all}>
                        <div style={{ 'textIndent': '10px', 'marginTop': '10px', 'borderBottom': '2px solid #F2F2F2', 'height': '30px' }}>订单编号:&nbsp;42442221224</div>
                        <div className={styles.order_box}>
                          {/* {item?.list.map((itens)=>())} */}
                          <div className={styles.order_title}>
                            <img style={{ 'width': '50px', 'height': '50px' }} src={items.imgs} alt="" />
                          </div>
                          <div className={styles.order_title}>
                            {items.name}
                          </div>
                          <div className={styles.order_title}>
                            {items.status == 1 ? '未付款' : items.status == 2 ? '已付款' : items.status == 3 ? '已发货' : items.status == 4 ? '已收货' :
                              items.status == 5 ? '已评价' : items.status == 6 ? '退款中' : items.status == 7 ? '已退款' : items.status == 8 ? '已取消' : items.status
                            }
                          </div>
                        </div>
                        <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between', 'height': '40px' }}>
                          <div style={{ 'textIndent': '17px' }}>应付:￥{items.price}</div>
                          <div className={styles.cancel}>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
    
                ))}
              </Tabs.TabPane>
            </Tabs>
          </div>
    
        </div>
      )
  }else{

  }

}